<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>changeLightness</title>
</head>

<body>
    <div>打开浏览器控制台查看结果</div>
    <script>
        const changeLightness = (delta, hsl) => {
            const [hue, saturation, lightness] = hsl.match(/\d+/g).map(Number);
            const newLightness = Math.max(
                0,
                Math.min(100, lightness + parseFloat(delta))
            );
            return `hsl(${hue},${saturation}%,${newLightness}%)`;
        };
        console.log(changeLightness(10, 'hsl(330, 50%, 50%)')); // 'hsl(330, 50%, 60%)'
        console.log(changeLightness(-10, 'hsl(330, 50%, 50%)')); // 'hsl(330, 50%, 40%)'
    </script>
</body>

</html>